<script setup>
  /*课程数据*/
  import {reactive, ref} from "vue";
  import courseApi from "@/api/courseApi.js";
  import {ElMessage} from "element-plus";
  import coachApi from "@/api/coachApi.js";
  import {Delete, Edit, Money, Plus, ShoppingTrolley} from "@element-plus/icons-vue";
  import roomApi from "@/api/RoomApi.js";
  import reserveApi from "@/api/reserveApu.js";

  let courses = ref([])
  const pageInfo = reactive({})
  loadCourses()
  /*加载课程信息*/
  function loadCourses(){
    courseApi.getAllCourse(pageInfo).then(resp=>{
      if (resp.code===200){
        console.log(resp.data)
        courses.value = resp.data.list
        pageInfo.total= resp.data.total
      }else{
        ElMessage.error(resp.msg)
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
  /*加载教练*/
  loadCoachs()
  let coachs = ref([])
  function loadCoachs(){
    coachApi.getAllCoach(null)
        .then(resp=>{
          coachs.value = resp.data
        })
  }

  /*搜索课程*/
  function onSearch(){
    loadCourses()
  }
  /*分页*/
  /*改变每页大小*/
  function handleSizeChange(val){
    pageInfo.pageSize = val
    loadCourses()
  }
  /*改变当前页*/
  function handleCurrentChange(val){
    pageInfo.pageNum = val
    loadCourses()
  }
  /*添加*/
  let addCourse =reactive({})
  let addVisible = ref(false)
  function showAdd(){
    addVisible.value = true
  }
  function handleAddAvatarSuccess(resp){
    addCourse.photo = resp.data
  }
  function handleAdd(){
    courseApi.addCourse(addCourse).then(resp=>{
      if (resp.code===200){
        ElMessage.success("添加成功")
        addVisible.value=false
        addCourse = reactive({})
        loadCourses()
      }else{
        ElMessage.error(resp.msg)
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
  let editVisible = ref(false)
  let editCourse = ref({})
  /*显示编辑*/
  function showEdit(row){
    editVisible.value = true
    editCourse.value = JSON.parse(JSON.stringify(row))
  }
  function handleEditAvatarSuccess(resp){
    editCourse.value.photo =resp.data
  }
  function handleEdit(){
    courseApi.editCourse(editCourse.value).then(resp=>{
      if (resp.code === 200) {
        ElMessage.success("编辑成功")
        editVisible.value = false
        loadCourses()
      }else{
        ElMessage.error(resp.msg)
      }
    }).catch(()=>{
      ElMessage.error("请求异常")
    })
  }
  /*删除*/
  function handleRemove(row){
    courseApi.remove(row.id).then(resp=>{
      if (resp.code===200){
        ElMessage.success("删除成功")
        loadCourses()
      }else {
        ElMessage.error(resp.msg)
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
  /*删除学员*/
  function removeMember(mid,cid){
    reserveApi.delete(mid,cid).then(resp=>{
      if (resp.code===200){
        ElMessage.success("删除成功")
      }else{
        ElMessage.error(resp.msg)
      }
    }).cache(()=>ElMessage.error("请求异常"))
  }
  function formatStatus(row){
    return ["已取消","未签到","上课中","已完课","已签到"][row.status]
  }
  /*查询教室*/
  let rooms = ref([])
  loadRooms()
  function loadRooms(){
    roomApi.get().then(resp=>{
      if (resp.code===200){
        rooms.value=resp.data
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
  function attendance(cid,mid){
    reserveApi.attendance(cid,mid).then(resp=>{
      if (resp.code===200){
        ElMessage.success("签到成功")
        loadCourses()
      }else{
        ElMessage.error(resp.msg)
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
</script>

<template>
<!-- 搜索 -->
    <el-form :model="pageInfo" :inline="true">
      <el-form-item label="课程名称" :label-width="80">
        <el-input v-model="pageInfo.name" clearable placeholder="请输入课程名字"/>
      </el-form-item>
      <el-form-item label="授课教练" :label-width="80">
        <el-select
            v-model="pageInfo.coachId"
            value-key="id"
            placeholder="请选择课程教练"
            style="width: 240px"
            clearable
        >
          <el-option
              v-for="item in coachs"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch"><el-icon><Search></Search></el-icon></el-button>
      </el-form-item>
    </el-form>
<!-- 创建 -->
  <div class="bar">
    <el-button type="success" @click="showAdd" >创建课程</el-button>
  </div>
<!-- 课程列表 -->
  <el-table
      :data="courses"
      style="width: 100%"
  >
    <el-table-column prop="id" label="ID" width="80" />
<!--    <el-table-column prop="photo" label="照片" >-->
<!--              <template #default="scope">-->
<!--                <el-image :src="scope.row.photo" style="max-height: 60px; max-width: 120px;"/>-->
<!--              </template>-->
<!--    </el-table-column>-->
    <el-table-column prop="photo" label="照片" width="120px">
      <template #default="scope">
        <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.photo"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[scope.row.photo]"
            show-progress
            :initial-index="4"
            :preview-teleported="true"
            fit="cover"
        />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="课程名" width="100" />
    <el-table-column prop="coach.name" label="教练"/>
    <el-table-column prop="roomName" label="教室" />
    <el-table-column prop="time" label="时间" width="180" />
    <el-table-column prop="length" label="时长" width="100"/>
    <el-table-column prop="reserveCount" label="预约人数" width="100"/>
    <el-table-column prop="maxCount" label="最大人数" width="100"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="success"
                   @click="showEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger"
                   @click="handleRemove(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    <el-table-column type="expand" >
      <template #default="props">
          <el-table :data="props.row.children" :border="childBorder">
            <el-table-column prop="id" label="ID" sortable width="100" />
            <el-table-column prop="phone" label="手机号" width="180" />
            <el-table-column prop="name" label="姓名" width="90" />
            <el-table-column prop="status" label="状态" width="90" :formatter="formatStatus"/>
            <el-table-column label="操作">
              <template #default="scope">
<!--                <el-button size="small" type="danger"
                           @click="removeMember(scope.row.id,props.row.id)"><el-icon><delete/></el-icon>&nbsp;删除</el-button>-->
                <el-button v-if="scope.row.status===1" type="warning" @click="attendance(props.row.id,scope.row.id)">签到</el-button>
              </template>
            </el-table-column>
          </el-table>
      </template>
    </el-table-column>
  </el-table>
<!--    <el-table :data="courses" :stripe="true" :border="true" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="photo" label="照骗" >
&lt;!&ndash;        <template #default="scope">
          <img :src="getImgUrl(scope.row.photo)" style="max-height: 60px; max-width: 120px;"/>
        </template>&ndash;&gt;
      </el-table-column>
      <el-table-column prop="name" label="课程名" />
      <el-table-column prop="coachName" label="教练"/>
      <el-table-column prop="room" label="教室" />
      <el-table-column prop="time" label="时间" width="180" />
      <el-table-column prop="length" label="时长" width="100"/>
      <el-table-column prop="reserveCount" label="预约人数" width="100"/>
      <el-table-column prop="maxCount" label="最大人数" width="100"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary"
                     @click="showReserve(scope.row)">学员</el-button>
          <el-button size="small" type="success"
                     @click="showEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger"
                     @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>-->
<!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
        v-model:current-page="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :size='"default"'
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 添加的弹窗 -->
  <el-dialog v-model="addVisible" title="创建新课程" width="600">
    <el-form :model="addCourse">
      <el-form-item label="照片" :label-width="80">
        <el-upload
            class="avatar-uploader"
            auto-upload="auto-upload"
            action="http://localhost:9001/upload/savePic"
            :show-file-list="false"
            name="imgFile"
            :on-success="handleAddAvatarSuccess"
        >
          <img v-if="addCourse.photo" :src="addCourse.photo" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="课程名称" :label-width="80">
        <el-input v-model="addCourse.name" placeholder="请输入课程名字"/>
      </el-form-item>
      <el-form-item label="授课教练" :label-width="80">
        <el-select
            v-model="addCourse.coachId"
            value-key="id"
            placeholder="请选择课程教练"
            style="width: 240px"
        >
          <el-option
              v-for="item in coachs"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上课教室" :label-width="70">
        <el-col :span="8">
          <el-select
              v-model="addCourse.roomId"
              value-key="id"
              placeholder="请选择上课教室"
              style="width: 240px"
          >
            <el-option
                v-for="item in rooms"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-col>
<!--        <el-col :span="4" style="text-align: center;">-->
<!--          <span class="text-gray-500">最大人数</span>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <el-input-number v-model="addCourse.maxCount" :min="10" :max="120" :step="10" placeholder="最大人数"/>-->
<!--        </el-col>-->
      </el-form-item>
      <el-form-item label="最大人数" :label-width="80">
        <el-input-number v-model="addCourse.maxCount" :min="10" :max="120" :step="10" placeholder="最大人数"/>
      </el-form-item>
      <el-form-item label="上课时间" :label-width="80">
        <el-col :span="10">
          <el-date-picker
              v-model="addCourse.time"
              editable
              type="datetime"
              placeholder="上课时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width:100%;"
          />
        </el-col>
        <el-col :span="4" style="text-align: center;">
          <span class="text-gray-500">课程时长</span>
        </el-col>
        <el-col :span="8">
          <el-input-number v-model="addCourse.length" :min="10" :max="120" :step="10" placeholder="课程时长"/>
        </el-col>
        <el-col :span="2" style="text-align: center;">
          <span class="text-gray-500">分钟</span>
        </el-col>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd">
          创建
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 编辑的弹窗 -->
  <el-dialog v-model="editVisible" title="编辑课程" width="600">
    <el-form :model="editCourse">
      <el-form-item label="照片" :label-width="80">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:9001/upload/savePic"
            :show-file-list="false"
            name="imgFile"
            :on-success="handleEditAvatarSuccess"
        >
          <img v-if="editCourse.photo" :src="editCourse.photo" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="课程名称" :label-width="80">
        <el-input v-model="editCourse.name" placeholder="请输入课程名字"/>
      </el-form-item>
      <el-form-item label="授课教练" :label-width="80">
        <el-select
            v-model="editCourse.coachId"
            value-key="id"
            placeholder="请选择课程教练"
            style="width: 240px"
        >
          <el-option
              v-for="item in coachs"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上课教室" :label-width="80">
        <el-col :span="10">
          <el-select
              v-model="editCourse.roomId"
              value-key="id"
              placeholder="请选择上课教室"
              style="width: 240px"
          >
            <el-option
                v-for="item in rooms"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="最大人数" :label-width="80">
        <el-input-number v-model="editCourse.maxCount" :min="10" :max="120" :step="10" placeholder="最大人数"/>
      </el-form-item>
      <el-form-item label="上课时间" :label-width="80">
        <el-col :span="10">
          <el-date-picker
              v-model="editCourse.time"
              editable
              type="datetime"
              placeholder="上课时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width:100%;"
          />
        </el-col>
        <el-col :span="4" style="text-align: center;">
          <span class="text-gray-500">课程时长</span>
        </el-col>
        <el-col :span="8">
          <el-input-number v-model="editCourse.length" :min="10" :max="120" :step="10" placeholder="课程时长"/>
        </el-col>
        <el-col :span="2" style="text-align: center;">
          <span class="text-gray-500">分钟</span>
        </el-col>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">
          编辑
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
  div{
    margin: 10px 6px;
  }
</style>